<template>
  <div>
    <Row class="list_row" style="margin-top: 0px">
      <Row style="margin: 5px 0px 10px 0px;">
        <Select v-model="selTreatStatus" :placeholder="$t('common.selectFeedbackS')" style="width: 200px;margin-right: 20px">
          <Option v-for="tc in treatStatusArr" :value="tc.val" :key="tc.val">{{tc.name}}</Option>
        </Select>
        <Input v-model="searchKeyword" :placeholder=" $t('common.contactPhone')" style="width: 200px;margin-right: 20px"/>
        <Button class="btnWhite" type="primary" icon="ios-search" style="margin-right: 20px" @click="search">{{$t('search')}}</Button>
      </Row>
      <Table :columns="feedbackColumn" border :data="dataList" stripe :no-data-text="noDataMsg">
        <template slot-scope="{ row, index }" slot="seq">
          {{(currentPage - 1) * pageSize + index + 1}}
        </template>
        <template slot-scope="{ row, index }" slot="treatStatus">
          <span v-if="row.treatStatus == 0">{{$t('common.untreated')}}</span>
          <span v-if="row.treatStatus == 1">{{$t('common.handled')}}</span>
        </template>

      </Table>
      <div class="div_page">
        <Page :total="totalCount" :current="currentPage" :page-size="pageSize"
              show-total show-elevator prev-text="<" next-text=">" @on-change="pageChg"/>
      </div>
    </Row>

    <!-- 查看弹窗 -->
    <Modal v-model="showModelVisiable" :mask-closable="false" width="850" :title="entityModelTitle"
           :styles="{top: '20px'}">
      <Form ref="entityFormRef" :model="entityForm" :label-width="120">
        <Row>
          <Col span="12">
            <FormItem :label="$t('common.contactUser')"    prop="contactUser">
              {{entityForm.contactUser}}
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem :label="$t('common.phone')" prop="phone"  v-show="$i18n.locale === 'zh-CN'">
              {{entityForm.phone}}
            </FormItem>
            <FormItem :label="$t('common.mail')" prop="mail"  v-show="$i18n.locale === 'en-US'">
              {{entityForm.mail}}
            </FormItem>
          </Col>
        </Row>
        <FormItem :label="$t('common.feedBackCt')"  prop="feedbackContent">
          <Input v-model="entityForm.feedbackContent" :placeholder="$t('common.enterV')" disabled type="textarea"
                 :autosize="{minRows: 2}"></Input>
        </FormItem>
        <FormItem :label="$t('common.imageAttach') " prop="imgList" v-show="entityForm.imgCount > 0">
          <img :src="imgUrl"
               style="max-height: 200px;max-width: 400px;margin-right: 20px;border: 4px solid #2d8cf0;cursor: pointer"
               v-for="imgUrl in entityForm.imgList" @click="showBigImg(imgUrl)">
        </FormItem>
        <div>

        </div>
        <FormItem :label="$t('common.dealtOptions') " prop="treatOpinions" v-show="opeType=='treat' || entityForm.treatStatus==1">
          <Input v-model="entityForm.treatOpinions" :disabled="opeType=='view'" :placeholder="$t('common.dealtOptions')" type="textarea"
                 :autosize="{minRows: 2}"></Input>
        </FormItem>

      </Form>
      <div slot="footer" style="text-align: center">
        <Button @click="showModelVisiable=false">{{$t('cancel')}}</Button>
        <Button type="primary" @click="doTreat" :loading="saveLoading" style="margin-left: 15px"
                v-show="opeType=='treat'">
          <span v-if="!saveLoading">{{$t('save')}}</span>
          <span v-else>{{$t('save')}}....</span>
        </Button>
      </div>
    </Modal>

  </div>
</template>
<script>
import FeedbackApi from '@/api/feedbackApi'
import { isEmpty, copyObj, getToken } from '@/libs/util'

export default {
  data () {
    return {
      imgIndex: 1,
      treatStatusArr: [
        { 'name': this.$t('common.selectFeedbackSAll'), val: 'all' },
        { 'name': this.$t('common.untreated'), val: '0' },
        { 'name': this.$t('common.handled'), val: '1' }
      ],
      opeType: 'view',
      showModelVisiable: false,
      saveLoading: false,
      searchKeyword: '',
      noDataMsg: this.$t('common.noData'),
      entityModelTitle: this.$t('common.viewFeedback') ,
      selTreatStatus: 'all',
      entityModelVisiable: false,
      entityForm: {
        id: '',
        showImg: false
      },
      totalCount: 20,
      currentPage: 1,
      pageSize: 10,
      dataList: [],
      feedbackColumn: [
        {
          title: this.$t('common.seq'), 
          slot: "seq",
          width: '110',
          render: (h, params) => {
            return h('span', {
              class: 'sortBlock'
            }, params.index + 1)
          }
        },
        { 
          title: this.$t('common.feedBackUser'), 
          key: 'userNickName'
        },
        {
          title: this.$t('common.contactUser'),  
          key: 'contactUser'
        },
        {
          title: this.$i18n.locale === 'zh-CN' ? this.$t('common.phone') : this.$t('common.mail'), 
          key: this.$i18n.locale === 'zh-CN' ? "phone" : "mail",
        },
        {
          title: this.$t('common.feedbackTime'),  
          key: 'feedbackTime'
        },
        {
          title: this.$t('common.feedBackCt'), 
          key: 'simpleContent'
        },
        // {
        //   title: '图片数',
        //   key: 'imgCount',
        //   width: 70
        // },
        {
          title: this.$t('common.treatStatus'), 
          slot: 'treatStatus',
          // width: 80
        },
        {
          title:this.$t('common.optColumn'),
          key: 'action',
          width: 160,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                class: 'btnBlue',
                style: {
                  marginRight: '15px'
                },
                on: {
                  click: () => {
                    this.showViewModal(params.row)
                  }
                }
              },  this.$t('common.previewBtn') ),
              h('Button', {
                props: {
                  type: 'warning',
                  size: 'small'
                },
                style: {
                  display: params.row.treatStatus == 1 ? 'none' : 'inline'
                },
                class: 'btnYellow',
                on: {
                  click: () => {
                    this.showTreatFeedback(params.row)
                  }
                }
              },this.$t('common.handle')  )
            ])
          }
        }]
    }
  },

  mounted () {
    this.search()
  },
  methods: {
    search () {
      this.currentPage = 1
      this.fetchDataList()
    },
    fetchDataList () {
      this.noDataMsg = this.$t('common.loading')
      this.dataList = []
      var param = { 'pageSize': this.pageSize, 'currentPage': this.currentPage }
      if (this.searchKeyword.length > 0) {
        param.searchKeyword = this.searchKeyword
      }
      if (this.selTreatStatus != 'all') {
        param.treatStatus = this.selTreatStatus
      }
      FeedbackApi.pageResult(param).then(res => {
        this.dataList = res.data.data.pageResult.items
        this.totalCount = res.data.data.pageResult.totalCount
        this.noDataMsg = this.$t('common.noData')
      }, error => {
        this.$Message.error(error.response.data.msg)
      })
    },
    showViewModal (row) {
      this.entityModelTitle = this.$t('common.viewFeedback') 
      this.entityForm = copyObj(row)
      this.opeType = 'view'
      this.showModelVisiable = true
    },
    showTreatFeedback (row) {
      this.entityModelTitle = this.$t('common.handleOptions')  
      this.entityForm = copyObj(row)
      this.opeType = 'treat'
      this.showModelVisiable = true
    },
    doTreat () {
      if (this.entityForm.treatOpinions.length == 0) {
        this.$Message.warning(this.$t('common.pHandOpt'))
        return
      }
      if (this.entityForm.treatOpinions.length > 1000) {
        this.$Message.warning( this.$t('common.handOptOver1000'))
        return
      }
      this.saveLoading = true
      const param = {
        id: this.entityForm.id,
        treatOpinions: this.entityForm.treatOpinions
      }
      FeedbackApi.treat(param).then(res => {
        this.saveLoading = false
        this.showModelVisiable = false
        this.$Message.success(this.$t('common.dealtSuc'))
        this.fetchDataList()
      }, error => {
        this.saveLoading = false
        this.$Message.error(error.response.data.msg)
      })
    },
    showBigImg (url) {
      window.open(url)
    },
    pageChg (selPage) {
      this.currentPage = selPage
      this.fetchDataList()
    }

  }
}
</script>
